/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2023, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

/*********************************************** NOTEBOOK */
@mixin searchHighlight {
    background: rgba($colorBtnSelectedBg, 0.4);
    color: $colorBtnSelectedFg;
    font-weight: bold;
}

.c-notebook {
    $headerFontSize: 1.3em;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    height: 100%;

    /****************************** CONTENT */
    &__body {
        // Holds __nav and __page-view
        display: flex;
        flex: 1 1 auto;
        overflow: hidden;
    }

    &__nav {
        flex: 0 0 auto;

        * {
            overflow: hidden;
        }
    }

    .c-sidebar {
        .c-sidebar__pane {
            flex-basis: 50%;
        }
    }

    body.mobile & {
        .c-list-button,
        &-snapshot-menubutton {
            display: none;
        }
    }

    /****************************** CONTENT */
    &__contents {
        width: 70%;
    }

    &__page-view {
        // Holds __header, __drag-area and __entries
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;

        > * {
            flex: 0 0 auto;

            + * {
                margin-top: $interiorMargin;
            }
        }
    }

    > * + * {
        margin-top: $interiorMargin;
    }

    &__head,
    &__controls,
    &__drag-area,
    &__entries {
        display: flex;
        flex-wrap: nowrap;
    }

    &__head,
    &__drag-area,
    &__controls {
        flex: 0 0 auto;
    }

    &__head {
        [class*='__'] + [class*='__'] {
            margin-left: $interiorMargin;
        }
    }

    &__search {
        flex: 1 1 auto;
    }

    &__page-locked-message,
    &__drag-area {
        border-radius: $controlCr;
        padding: 10px;

        &:before {
            margin-right: 7px !important;
        }
    }

    &__drag-area {
        background: rgba($colorKey, 0.1);
        border: 1px dashed rgba($colorKey, 0.7);
        color: $colorKey;
        cursor: pointer;
        justify-content: center;

        [class*='__label'] {
            font-style: italic;
            @include ellipsize();
        }

        &:hover {
            background: rgba($colorBodyFg, 0.1);
        }

        &.drag-active,
        &.is-active {
            // Not currently working
            border-color: $colorKey;
        }

        body.mobile & {
            display: none;
        }
    }

    /***** PAGE VIEW */
    &__page-view {
        &__header {
            display: flex;
            flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
            line-height: 220%;

            > * {
                flex: 0 0 auto;
            }
        }

        &__path {
            flex: 1 1 auto;
            margin: 0 $interiorMargin;
            overflow: hidden;
            white-space: nowrap;
            font-size: $headerFontSize;

            > * {
                // Section
                flex: 0 0 auto;

                + * {
                    // Page
                    display: inline;
                    flex: 1 1 auto;
                    @include ellipsize();
                }
            }
        }
    }

    &__entries {
        flex-direction: column;
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: scroll;

        @include desktop() {
            padding-right: $interiorMarginSm; // Scrollbar kickoff
        }

        [class*='__entry'] + [class*='__entry'] {
            margin-top: $interiorMarginSm;
        }

        .commit-button {
            @include cButton();
            position: absolute;
            right: 5px;
            bottom: 5px;
        }
    }

    /***** SEARCH RESULTS */
    &__search-results {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        overflow-y: auto;

        > * + * {
            margin-top: 5px;
        }

        &__header {
            font-size: $headerFontSize;
            flex: 0 0 auto;
        }

        .c-notebook__entries {
            flex: 1 1 auto;
        }

        .c-ne {
            flex-direction: column;

            > * + * {
                margin-top: $interiorMargin;
            }
        }
    }

    /***** RESTRICTED NOTEBOOK */
    &__page-locked-message {
        background: rgba($colorAlert, 0.2);
        display: flex;
        padding: 5px;

        > * + * {
            margin-left: $interiorMargin;
        }

        [class*='icon'] {
            flex: 0 0 auto;
        }

        [class*='__message'] {
            flex: 1 1 auto;
        }
    }

    &__commit-entries-control {
        display: flex;
        justify-content: flex-end;
    }
}

.is-notebook-default,
.is-status--notebook-default {
    &:after {
        color: $colorFilter;
        font-family: symbolsfont;
        font-size: 0.9em;
    }

    &.c-list__item:after {
        content: $glyph-icon-notebook-page;
        flex: 1 0 auto;
        text-align: right;
    }
}

/****************************** ENTRIES */
.c-ne {
    // A Notebook entry
    $p: $interiorMarginSm;
    @include discreteItem();
    cursor: pointer;
    display: flex;
    padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;

    &:hover {
        background: rgba($colorBodyFg, 0.3);
    }

    &.is-selected {
        background: rgba($colorKey, 0.2);

        .c-ne__text {
            .c-notebook--page-unlocked & {
                cursor: text;

                @include hover() {
                    &:not(.locked) {
                        background: $colorInputBgHov;
                    }
                }

            }
        }
    }

    &__text,
    &__local-controls {
        padding-top: $p;
        padding-bottom: $p;
    }

    &__creator,
    &__embed__time {
        opacity: 0.7;
    }

    &__time-and-creator-and-delete,
    &__text,
    &__input {
        padding: $p;
    }

    &__time-and-creator-and-delete {
        display: flex;
        align-items: center;

        > * + * {
            float: right;
            margin-left: auto;
        }
    }

    &__creator [class*='icon'] {
        font-size: 0.95em;
    }

    &__time-and-content {
        display: block;
        flex: 1 1 auto;
        overflow: visible;

        > * + * {
            margin-top: $interiorMarginSm;
        }

        [class*='created-'] {
            color: pullForward($colorBodyFg, 20%);
        }
    }

    &__time {
        * {
            white-space: nowrap;
        }
    }

    &__content {
        flex-direction: column;
        flex: 1 1 auto;
        margin-right: $interiorMarginSm;
        margin-top: $interiorMargin;

        > [class*='__'] + [class*='__'] {
            margin-top: $interiorMarginSm;
        }
    }

    &__text {
        min-height: 22px; // Needed in Firefox when field is blank
        white-space: normal;

        .search-highlight {
            @include searchHighlight();
        }

        // Resets and styling for markdown
        h1, h2, h3, h4, h5 {
            margin: unset !important;
            padding: unset !important;
        }

        a {
            text-decoration: underline;
        }

        em {
            font-style: italic;
        }

        > * {
            &:not(:first-child) {
                margin-top: $interiorMarginSm;
            }
        }

        p, blockquote, pre {
            margin: 0;

            &:not(:first-child) {
                margin-top: $interiorMarginLg;
            }
        ;
        }

        blockquote {
            $m: 16px;
            margin-left: $m;
            margin-right: $m;
        }

        ul, ol {
            padding: 0 0 0 16px;
        }

        ul {
            list-style: square;
        }

        ol {
            list-style: decimal;
        }

        li {
            list-style-type: inherit;
        }

        table {
            width: auto;
        }

        th, td {
            border: 1px solid rgba($colorBodyFg, 0.7);
        }

        th {
            background: rgba($colorBodyFg, 0.2);
        }
    }

    &__input {
        // Textarea
        //@include inlineInput;
        @include reactive-input();
        padding-left: $p;
        padding-right: $p;
        overflow: unset;
        margin-bottom: $interiorMargin;
        min-height: 5rem;
        resize: vertical;
        width: 100%;
    }

    &__save-button {
        display: flex;
        justify-content: flex-end;

        .c-button {
            $lrP: 15px;
            padding-left: $lrP;
            padding-right: $lrP;
        }
    }

    &__section-and-page {
        // Shown when c-ne within search results
        background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
        border-radius: $controlCr;
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        padding: $interiorMargin;

        .search-highlight {
            @include searchHighlight();
        }

        > * + * {
            margin-left: $interiorMargin;
        }

        [class*='icon'] {
            font-size: 0.8em;
            opacity: 0.7;
        }
    }

    &__remove {
        float: right;
    }
}

/****************************** EMBEDS */
@mixin snapThumb() {
    // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
    $d: 40px;
    border: 1px solid $colorInteriorBorder;
    cursor: pointer;
    width: $d;
    height: $d;
    border-radius: 5px;
    overflow: hidden;

    img {
        height: 100%;
        width: 100%;
    }
}

.snap-thumb {
    // LEGACY,
    @include snapThumb();
}

.c-ne__embeds-wrapper {
    max-height: 75px;
    padding-left: $interiorMargin;
    padding-top: $interiorMargin;
    display: flex;
}

.c-ne__embed {
    @include discreteItemInnerElem();
    display: inline-flex;
    flex: 0 0 auto;
    padding: $interiorMargin;
    border: 1px solid $colorInteriorBorder;

    &__info {
        display: flex;
        flex-direction: column;
        margin-left: $interiorMargin;

        a {
            color: $colorKey;
        }
    }

    &__name,
    &__link {
        // Holds __link and __context-available
        display: flex;
        align-items: center;
    }

    &__link {
        flex: 1 1 auto;

        &:before {
            display: block;
            font-size: 1em;
            margin-right: $interiorMarginSm;
        }
    }

    &__context-available {
        font-size: 0.7em;
        margin-left: $interiorMarginSm;
    }

    &__snap-thumb {
        @include snapThumb();
    }

    &__actions {
        margin: $interiorMarginSm;
    }

    &__actions-menu {
        width: 55vh;
        max-width: 500px;
        height: 130px;
        z-index: 70;

        [class*='__icon'] {
            filter: $colorKeyFilter;
            margin: 0%;
            height: 4vh;
        }

        [class*='__item-description'] {
            min-width: 200px;
        }
    }
}

/****************************** SNAPSHOTTING */
// LEGACY: TODO: refactor these names
.t-contents,
.snap-annotation {
    overflow: hidden;
}

.s-status-taking-snapshot,
.overlay.snapshot {
    // Handle overflow-y issues with tables and html2canvas
    background: $colorBodyBg; // Prevent html2canvas from using white background
    color: $colorBodyFg;
    padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image

    .l-sticky-headers .l-tabular-body {
        overflow: auto;
    }

    .l-browse-bar {
        display: none; // Suppress browse-bar when snapshotting from view-large overlay
        + * {
            margin-top: 0 !important; // Remove margin from any following elements
        }
    }

    * {
        box-shadow: none !important; // Prevent html2canvas problems with box-shadow
    }
}

.c-notebook-snapshot {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

    > * + * {
        margin-top: $interiorMargin;
    }

    &__header {
        flex: 0 0 auto;
    }

    &__image {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        flex: 1 1 auto;
    }
}

/****************************** SNAPSHOT CONTAINER */
.c-snapshots-h {
    // Is hidden when the parent div l-shell__drawer is collapsed, so no worries about padding, etc.
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: $interiorMargin $interiorMarginLg;

    > * + * {
        margin-top: $interiorMargin;
    }

    .l-browse-bar {
        flex: 0 0 auto;
    }

    .c-snapshots-h__title {
        display: flex;
    }

    .c-snapshots {
        flex: 1 1 auto;
    }
}

.c-snapshots {
    flex-wrap: wrap;
    overflow: auto;

    .c-snapshot {
        margin: 0 $interiorMarginSm $interiorMarginSm 0;
    }

    .hint {
        font-size: 1.25em;
        font-style: italic;
        opacity: 0.7;
        padding: $interiorMarginLg;
        text-align: center;
    }
}

/****************************** PAINTERRO OVERRIDES */
.annotation-dialog .abs.editor {
    border-radius: 0;
}

#snap-annotation {
    $m: 0; //$interiorMargin;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: $m;
    right: 0;
    bottom: $m;
    left: 0; // LEGACY, deal with .editor border-radius clipping stuff
}

#snap-annotation-wrapper,
#snap-annotation-bar {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

#snap-annotation-wrapper {
    background: rgba($colorBodyFg, 0.1);
    border: 1px solid $colorInteriorBorder;
    order: 2;
    flex: 10 0 auto;
}

#snap-annotation-bar {
    // Holds tool buttons, color selectors, etc.
    $h: 22px;
    $fs: 0.8rem;
    $m: $interiorMarginSm;

    display: flex;
    align-items: center;
    height: $h + ($m * 2) !important;
    margin-bottom: $interiorMarginLg;
    order: 1;
    flex: 0 0 auto;
    background-color: transparent !important;
    padding: $interiorMarginSm;

    > div {
        display: contents;

        > * + * {
            margin-left: $interiorMargin !important;
        }
    }

    .ptro-tool-controls {
        display: flex;
        margin-left: $interiorMarginLg !important;

        > * + * {
            margin-left: $interiorMargin !important;
        }
    }

    .ptro-icon-btn,
    .ptro-named-btn,
    .ptro-color-btn,
    .ptro-bordered-btn,
    .ptro-tool-ctl-name,
    .ptro-color-btn,
    .tool-controls,
    .ptro-input {
        // Lot of resets for crappy CSS in Painterro
        font-family: inherit;
        font-size: $fs !important;
        height: $h !important;
        margin: 0;
        position: relative;
        line-height: $h !important;
    }

    .ptro-tool-ctl-name {
        border-radius: 0;
        background: none;
        color: $colorBodyFg;
        top: auto;
        font-family: inherit;
        padding: 0;
    }

    .ptro-color-btn {
        width: $h !important;
    }

    .ptro-check,
    .ptro-color-control,
    .ptro-icon-btn,
    .ptro-named-btn {
        // Buttons in toolbar
        border-radius: $smallCr;
        box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
        color: $colorBtnFg !important;
        padding: 1px $interiorMargin;

        &:hover {
            background: $colorBtnBgHov;
            color: $colorBtnFgHov;
        }

        i {
            display: contents;
            font-size: $fs * 1.2;
            line-height: inherit;
        }
    }

    .ptro-color-control,
    .ptro-icon-btn,
    .ptro-named-btn {
        // Buttons in toolbar
        background-color: $colorBtnBg;
    }

    .ptro-color-active-control {
        background: $colorBtnMajorBg !important;
        color: $colorBtnMajorFg !important;
    }

    .ptro-info,
    .ptro-btn-color-checkers-bar,
    *[title='Font name'],
    *[title='Stroke color'],
    *[title='Stroke width'],
    *[data-id='fontName'],
    *[data-id='fontStrokeSize'],
    *[data-id='stroke'] {
        display: none;
    }
}

/****************************** MOBILE */
body.mobile {
    .c-notebook__drag-area {
        display: none;
    }

    .c-notebook__entry {
        [class*='local-controls'] {
            display: none;
            height: fit-content;
        }
    }

    &.phone.portrait {
        .c-notebook__head,
        .c-notebook__entry,
        .c-ne__time-and-content {
            flex-direction: column;

            > [class*='__'] + [class*='__'] {
                margin-left: 0;
                margin-top: $interiorMargin;
            }
        }

        .c-notebook__entry {
            [class*='text'] {
                min-height: 0;
                pointer-events: none;
            }
        }
    }
}

/****************************** INDICATOR */
.c-indicator.has-new-snapshot {
    $c: $colorOk;
    @include pulseProp(
            $animName: flashSnapshot,
            $dur: 500ms,
            $iter: infinite,
            $prop: background,
            $valStart: rgba($c, 0.4),
            $valEnd: rgba($c, 0)
    );
}

/****************************** RESTRICTED NOTEBOOK / SHIFT LOG */
.c-notebook--restricted {
    .c-notebook__pages {
        .c-list__item {
            // Can display lock icon when a page is committed.
            &:before {
                $s: 0.8em;
                color: $colorAlert;
                display: block;
                font-size: $s;
                width: $s;
                margin-right: $interiorMarginSm;
            }

            &:not([class*='lock']) {
                &:before {
                    content: '';
                }
            }
        }
    }
}

.c-list__item {
    &__name:focus {
        text-overflow: clip;
    }
}
